import { useEffect, useState } from 'react';
import { Skeleton } from 'antd';
import styles from '@/styles/list.module.scss';

interface ListItem {
	id: number;
	title: string;
	description: string;
	imageUrl: string;
}

const ListPage = () => {
	const [loading, setLoading] = useState(true);
	const [data, setData] = useState<ListItem[]>([]);

	// 模拟获取数据的异步请求
	const fetchData = async () => {
		// 模拟 API 延迟
		await new Promise((resolve) => setTimeout(resolve, 2000));

		// 模拟返回的数据
		const mockData: ListItem[] = Array.from({ length: 10 }, (_, index) => ({
			id: index + 1,
			title: `标题 ${index + 1}`,
			description: `这是第 ${index + 1} 个项目的详细描述信息，可以包含多行文本内容。`,
			imageUrl: `https://picsum.photos/200/200?random=${index + 1}`
		}));

		setData(mockData);
		setLoading(false);
	};

	useEffect(() => {
		fetchData();
	}, []);

	return (
		<div className={styles.container}>
			<h1>列表页面</h1>
			<div className={styles.listWrapper}>
				{/*  <List
        itemLayout="horizontal"
        dataSource={loading ? Array(10).fill({}) : data}
        renderItem={(item, index) => (
          <List.Item className={styles.listItem}>
            <Skeleton loading={loading} active avatar paragraph={{ rows: 2 }}>
              <List.Item.Meta
                avatar={<Avatar src={item.imageUrl} size={64} />}
                title={<a href="#">{item.title}</a>}
                description={item.description}
              />
            </Skeleton>
          </List.Item>
        )}
      /> */}
				{loading
					? Array(10)
							.fill(null)
							.map((_, index) => (
								<div key={index} className={styles.listItem}>
									<Skeleton loading={true} active avatar paragraph={{ rows: 2 }} />
								</div>
							))
					: data.map((item) => (
							<div key={item.id} className={styles.listItem}>
								<div className={styles.itemContent}>
									<div className={styles.imageWrapper}>
										<img src={item.imageUrl} alt={item.title} />
									</div>
									<div className={styles.textContent}>
										<h3 className={styles.title}>{item.title}</h3>
										<p className={styles.description}>{item.description}</p>
									</div>
								</div>
							</div>
					  ))}
			</div>
		</div>
	);
};

export default ListPage;
